<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
    <script type="text/javascript ">
        $(function() {
           findbook();
        });

         function findbook() {
            $.ajax("/find",//获取数据路径URL
                {
                 datatype:"json",
                 type:"post",
                    contentType:"application/json",
                    data:JSON.stringify(
                        {id:2,
                        name:"spring boot 应用"}
                    ),

                    async:true,
                    success:function (data) {
                     console.log(data);
                     $("#image").attr("src","images/"+data.images +"");
                     $("#name ").html (data.name);
                     $("#author").html (data.author);
                        $("#price ").html (data.price);
                        $("#remark ").html (data.remark);

                 },
                } )  ;
         }


    </script>
</head>
<body>
<div class="panel panel-danger">
  <div class="panel-heading " >
<h3 class="panel-title " > Spring boot 中JAVA 对象转json</h3>

  </div>
</div>
<div class="container " >
    <div class="row " >
        <div class="col-lg-4 " >
            <p>封面：<img id="image" src="images/1.jpg  "  ></p>
            <p>书名：<span id="name"></span>  </p>
            <p>作者：<span id="author"></span>  </p>
            <p>价格：<span id="price"></span>  </p>
            <p>评论：<span id="remark"></span>  </p>

        </div>


    </div>
</div>


</body>
</html>